<template>
    <view class="content">
        <view class="box">
            <view class="o-nav">
                <view class="o-nav-i" :class="{active : header == 1}" @click="chooseHeader(1)">全部订单</view>
                <view class="o-nav-i" :class="{active : header == 2}" @click="chooseHeader(2)">周期服务</view>
            </view>
            <view class="t-nav">
                <view class="t-nav-i" v-if="header == 1" :class="{Tactive : type == 1}" @click="chooseNav(1)">未支付</view>
                <view class="t-nav-i" :class="{Tactive : type == 3}" @click="chooseNav(3)">服务中</view>
                <view class="t-nav-i" :class="{Tactive : type == 4}" @click="chooseNav(4)">已完成</view>
            </view>
        </view>
        
        <view class="wrapper">
            <view class="item" v-for="(item, index) in list" :key="index" @click="toDetails(item)">
                <view class="title">{{item.items}}</view>
                <view class="time" v-if="item.week">{{item.week}}</view>
                <view class="item-down" v-if="item.name">
                    <image :src="IMAGEURL + 'static/icon/icon_01.png'" class="icon-01"></image>
                    <view class="name">{{item.name}}</view>
                    <view class="male" v-if="item.gender == 1">男</view>
                    <view class="female" v-if="item.gender == 2">女</view>
                    <view class="age">{{item.age}}岁</view>
                </view>
                <view class="down">
                    <view>
                        <view class="tip" v-if="type == 3">
                            <image :src="IMAGEURL + 'static/icon/tip.png'" class="tip-icon"></image>
                            <view>取消服务需提前1小时</view>
                        </view>
                    </view>
                    <view class="btns">
                        <view class="btn2" v-if="type == 1 || type == 3" 
                            @click.stop="$gTo(`../order/cancel-order?id=${item.id}`)">取消服务</view>
                        <view class="btn1" v-if="type == 1" @click.stop="toPay(item)">立即预约</view>
                        <view class="btn1" v-if="type == 3 && item.service_id == 1" @click.stop="delay(item)">服务延期</view>
                        <view class="btn3" v-if="type == 4 && item.evaluate == 0">立即评价</view>
                    </view>
                </view>
            </view>
            
            <view style="height: 94rpx;padding-top: 30rpx;">
                <u-loadmore :status="status" v-if="status != 'loadmore'" />
            </view>
        </view>
        
        <template v-if="show">
            <u-mask :show="show">
                <view class="privacy-pop">
                    <view class="privacy-pop-box">
                        <view class="privacy-title">服务延期</view>
                        <view class="privacy-item">
                            <view>延期</view>
                            <view class="privacy-item-right" @click="show_1 = true">
                                <input type="text" class="privacy-inp" v-model="name" placeholder="请选择" disabled />
                                <u-icon name="arrow-down-fill" color="#666666" size="24"></u-icon>
                            </view>
                        </view>
                        <view class="privacy-item">
                            价格：￥<text class="u-font-36 text-bold">{{ money }}</text>
                        </view>
                        <view class="btn-text2" @click.stop="doSubmit">确认延期</view>
                        <image :src="IMAGEURL + 'static/icon/close_02.png'" class="close" @click="show = false"></image>
                    </view>
                </view>
            </u-mask>
        </template>
        
        <u-select v-model="show_1" mode="single-column" :list="courseList" value-name="id" label-name="name" @confirm="confirm"></u-select>
    </view>
</template>

<script>
    import { IMAGEURL } from '@/static/js/common.js';
    export default {
        data() {
            return {
                IMAGEURL,
                show: false,
                show_1: false,
                header: 1, //1全部 2周期
                type: 3,//1未支付 3服务中 4已完成
                status: 'loadmore', //是否显示没有更多了
                page: 1,
                list: [],
                courseList: [],//延期列表
                name: '',
                nameId: '',
                money: 0,//延期价格
                data: {},
                option: {},//
            };
        },
        onLoad() {
            this.getOption()
        },
        onShow() {
            if (this.$getSync('userToken')) {
                this.page = 1
                this.list = []
                this.status = 'loadmore'
                this.getList()
            } else {
                uni.showModal({
                	title: '温馨提示',
                	content: '登录后获取订单信息，是否登录？',
                	success: (res) => {
                		if (res.confirm) {
                			this.$gTo(`/pages/login/login`)
                		} else if (res.cancel) {
                			this.$sTo(`/pages/tabbar/index`)
                		}
                	}
                });
            }
        },
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
        methods: {
            // 确认延期
            doSubmit() {
                if (!this.nameId) {
                    this.$toast('请选择延期时长')
                    return
                }
                this.$ajax('order_delay', {
                	user_token: this.$getSync('userToken'),
                	id: this.data.id,//订单id
                	delay_id: this.nameId,//延期时间id
                }).then(ret => {
                	if (ret.success == 1000) {
                        this.show = false
                		this.money = 0
                        this.name = ''
                        this.nameId = ''
                        this.data = {}
                        const newData = JSON.stringify(ret.detail)
                        this.$gTo(`/mine/pages/pay/pay?data=${encodeURIComponent(newData)}`)
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            // 选择延期时间
            confirm(e) {
                console.log(e)
                this.name = e[0].label
                this.nameId = e[0].value
                
                if (this.nameId) {
                    this.$ajax('order_delay_price', {
                    	user_token: this.$getSync('userToken'),
                    	id: this.data.id,//订单id
                    	delay_id: this.nameId,//延期时间id
                    }).then(ret => {
                    	if (ret.success == 1000) {
                    		this.money = ret.detail.price
                    	} else {
                    		this.$toast(ret.msg);
                    	}
                    });
                }
            },
            
            // 服务延期
            delay(item) {
                if (item.type == 1) {
                    this.courseList = this.option.delay_single
                } else {
                    this.courseList = this.option.delay_week
                }
                this.data = item
                this.show = true
            },
            
            // 立即预约
            toPay(item) {
                const newData = JSON.stringify(item)
                this.$gTo(`/mine/pages/pay/pay?data=${encodeURIComponent(newData)}`)
            },
            
            toDetails(item) {
                this.$gTo(`../order/details?id=${item.id}`)
            },
            
            chooseHeader(num) {
                if (this.header == num) return
                this.header = num
                if (this.header == 2) {
                    this.type = 3
                }
                this.getOption()
                this.page = 1
                this.list = []
                this.status = 'loadmore'
                this.getList()
            },
            
            chooseNav(num) {
                if (this.type == num) return
                this.type = num
                this.page = 1
                this.list = []
                this.status = 'loadmore'
                this.getList()
            },
            
            getList() {
            	if (this.status == 'nomore') return;
            	this.status = 'loading';
            	this.$ajax('order_list', {
            		user_token: this.$getSync('userToken'),
            		page: this.page,
            		limit: 10,
                    type: this.header,//类型 1全部订单 2周期服务 3服务人员首页
                    status: this.type,//1未支付 2待接单 3服务中 4已完成
            	}).then(ret => {
            		if (ret.success == 1000) {
            			if (ret.detail && ret.detail.orders && ret.detail.orders.length > 0) {
            				this.list = this.list.concat(ret.detail.orders);
            				this.page++;
            				this.status = 'loadmore'
            			} else {
            				this.status = 'nomore'
            			}
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            getOption() {
            	this.$ajax('order_option', {
            		
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.option = ret.detail
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
        }
    };
</script>

<style>
    .u-tabbar__content__item .u-icon__img {
    	width: 50rpx !important;
    	height: 50rpx !important;
    }
    .u-tabbar__content>.u-tabbar__content__item:first-child .u-icon__img{
        width: 100rpx !important;
        height: 100rpx !important;
    }
</style>

<style lang="scss">
    // 弹窗
    .privacy-pop {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    
    .privacy-pop-box {
        width: 580rpx;
        padding: 40rpx;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 20rpx;
        position: relative;
    }
    
    .privacy-title {
        font-size: 32rpx;
        font-weight: bold;
        text-align: center;
        padding-bottom: 30rpx;
    }
    
    .privacy-item {
        margin-bottom: 20rpx;
    }
    
    .privacy-item>view {
        margin-bottom: 10rpx;
    }
    
    .privacy-item-right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f8f8f8;
        border-radius: 10rpx;
        padding: 20rpx;
    }
    
    .privacy-inp {
        flex: 1;
        // height: 77rpx;
        // line-height: 77rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .btn-text2 {
        font-size: 30rpx;
        color: #fff;
        background-color: #f29700;
        padding: 20rpx 60rpx;
        border-radius: 20rpx;
        margin: 0 20rpx;
        text-align: center;
    }
    
    .close {
        width: 58rpx;
        height: 58rpx;
        position: absolute;
        left: 35vw;
        bottom: -100upx;
    }
    
    
    page{
        background-color: #f5f5f5;
    }
    .box{
        background-color: #fff;
        padding-top: 20rpx;
    }
    .o-nav{
        width: 415rpx;
        height: 64rpx;
        background-color: #a2a8b7;
        border-radius: 15rpx;
        padding: 2rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
    }
    .o-nav-i{
        width: calc(411rpx / 2);
        font-size: 28rpx;
        color: #fff;
        text-align: center;
        line-height: 60rpx;
    }
    .active{
        font-size: 30rpx;
        color: #a2a8b7;
        background-color: #fff;
        border-radius: 15rpx;
    }
    .t-nav{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .t-nav-i{
        padding: 30rpx 0 20rpx;
        font-size: 28rpx;
        color: #565656;
    }
    .Tactive{
        font-size: 32rpx;
        color: #000;
        font-weight: bold;
        position: relative;
    }
    .Tactive::after{
        display: block;
        content: '';
        width: 32rpx;
        height: 8rpx;
        background-color: #f29700;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .wrapper{
        padding: 20rpx;
    }
    .item{
        padding: 35rpx 25rpx;
        margin-bottom: 20rpx;
        background-color: #fff;
        border-radius: 15rpx;
    }
    .title{
        font-size: 34rpx;
        font-weight: bold;
        word-break: break-all;
        white-space: pre-line;
    }
    .time{
        font-size: 26rpx;
        color: #8e8e8e;
        padding-top: 10rpx;
    }
    .item-down{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-top: 20rpx;
    }
    .icon-01{
        width: 37rpx;
        height: 37rpx;
        margin-right: 15rpx;
    }
    .name{
        font-size: 32rpx;
        font-weight: bold;
        padding-right: 15rpx;
    }
    .male{
        width: 34rpx;
        height: 34rpx;
        border-radius: 5rpx;
        background-color: #edf6ff;
        font-size: 26rpx;
        color: #2d96fa;
        text-align: center;
        line-height: 34rpx;
    }
    .female{
        width: 34rpx;
        height: 34rpx;
        border-radius: 5rpx;
        background-color: #ffeeed;
        font-size: 26rpx;
        color: #ff5748;
        text-align: center;
        line-height: 34rpx;
    }
    .age{
        font-size: 26rpx;
        color: #727272;
        padding-left: 15rpx;
    }
    
    .down{
        padding-top: 10rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .tip{
        font-size: 24rpx;
        color: #ff5748;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .tip-icon{
        width: 26rpx;
        height: 26rpx;
        margin-right: 10rpx;
    }
    .btns{
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .btns>view{
        font-size: 28rpx;
        padding: 10rpx 20rpx;
        border-radius: 10rpx;
        margin-left: 20rpx;
        box-sizing: border-box;
    }
    .btn1{
        color: #fff;
        background-color: #f29700;
    }
    .btn2{
        border: 2rpx solid #eeeeee;
    }
    .btn3{
        background-color: #fffcf8;
        border: 2rpx solid #f29700;
    }
    

</style>
